<meta charset=utf-8>
<style>
body { margin: 0px; }
canvas { width:100%; height:100%; overflow: hidden; }
</style>
<head><meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1">
<script type="text/javascript" src="../h3du_min.js"></script>
<script type="text/javascript" src="demoutil.js"></script>
<script type="text/javascript" src="../extras/meshjson.js"></script>
</head>
<body>
<canvas id=canvas></canvas>
<div style="z-index:1000;left:0;top:0;height:1em;background-color:white;position:absolute">
Red box was animated with quatNlerp, blue box with quatSlerp</div>
<script id="demo">
/* global H3DU */
// <!--
/*
 Any copyright to this file is released to the Public Domain.
 http://creativecommons.org/publicdomain/zero/1.0/
 If you like this, you should donate
 to Peter O. (original author of
 the Public Domain HTML 3D Library) at:
 http://peteroupc.github.io/
*/
(function() {
  "use strict";
  // Create the 3D scene; find the HTML canvas and pass it
  // to Scene3D.
  var scene = new H3DU.Scene3D(document.getElementById("canvas"));
  var sub = new H3DU.Batch3D()
   // Set the perspective view. Camera has a 45-degree field of view
   // and will see objects from 0.1 to 100 units away.
   .perspectiveAspect(45, 0.1, 100)
   // Move the camera back 40 units.
   .setLookAt([0, 0, 40]);
  // Create a box mesh 10 units in size
  var mesh = H3DU.Meshes.createBox(10, 20, 20).wireFrame();
  // Create a shape based on the mesh and give it a red color
  var shape = new H3DU.Shape(mesh).setMaterial(H3DU.Material.fromBasic("red"));
  var shape2 = new H3DU.Shape(mesh).setMaterial(H3DU.Material.fromBasic("blue"));
  // Add the shape to the scene
  sub.addShape(shape);
  sub.addShape(shape2);
  // Create a timer
  var timer = {};
  function rn() {
    return Math.random() * 2.0 - 1;
  }
  function randquat() {
    return H3DU.Math.vec4normInPlace([rn(), rn(), rn(), rn()]);
  }
  var quatLast = H3DU.Math.quatIdentity();
  var quatNext = randquat();
  var renderFrames = 0;
  // Set up the render loop
  H3DU.renderLoop(function(time) {
    renderFrames += H3DU.newFrames(timer, time);
    var q = null;
    var frameCount = 240.0;
    if(renderFrames >= frameCount) {
      renderFrames %= frameCount;
      q = quatNext;
      var newq = randquat();
      quatLast = quatNext;
      quatNext = newq;
    }
    // Animate red box using Nlerp
    q = H3DU.Math.quatNlerp(quatLast, quatNext, renderFrames / frameCount);
    shape.setQuaternion(q);
    // Animate blue box using Nlerp
    q = H3DU.Math.quatSlerp(quatLast, quatNext, renderFrames / frameCount);
    shape2.setQuaternion(q);
   // Render the scene
    scene.render(sub);
  });
}(this));
// -->
</script>
</body>
